<script setup>
import {ref, onMounted, onUnmounted, reactive, render, nextTick,} from 'vue';
import {init} from '@/utils/three/earth-moon.js'
import {initLoginBg} from "@/utils/Background/xk.js";
import {useRouter} from "vue-router";
const router=useRouter()
const canvas = ref(null)
onMounted(() => {
  setTimeout(()=>{
    init()
    if (canvas.value) {
      initLoginBg(canvas.value)
    }
  },50)
})
onUnmounted(()=>{
  const div1=document.getElementById('tagsEarth')
  const div2=document.getElementById('tagsMoon')
  if(div1.childNodes[0]){
    div1.removeChild(div1.childNodes[0])
  }
  if(div2.childNodes[0]){
    div2.removeChild(div2.childNodes[0])
  }
})



</script>

<template>
  <div id="container" style="position: relative;">
    <canvas ref="canvas" class="canvas"></canvas>
    <div id="three" class="container"></div>
  </div>
</template>

<style scoped>
.canvas{
  width: 100vw;
  height: calc(100vh - 40px);
  position: absolute;
  z-index: 1;
}
.container{
  position: absolute;
  z-index: 2;
}
</style>
